<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账号</title>
    <link rel="stylesheet" href="css/account.css">
    <link rel="stylesheet" href="图标图标/iconfont.css">
</head>

<body>
    <header>
        <div class="z_text">
            <p class="on">我的</p>
            <p>创作</p>
            <p>信息</p>
        </div>
        <div class="z_icon">
            <p class="iconfont icon-wode"></p>
            <p class="iconfont icon-set"></p>
        </div>
    </header>
    <section>
        <!-- 粉色部分 -->
        <div class="z_mySet">
            <div class="z_mySet_top">
                <dl class="picture_box">
                    <dt><img src="img/z-26.jpg" alt=""></dt>
                    <dd>
                        <p class="one">设置昵称 ></p>
                        <p class="two"><img src="img/z-1.jpg" alt=""></p>
                    </dd>
                </dl>
                <p>模式切换<span></span></p>
            </div>
            <div class="z_mySet_bottom">
                <div class="fans_count">
                    <dl>
                        <dt>0</dt>
                        <dd>粉丝</dd>
                    </dl>
                    <dl>
                        <dt>1</dt>
                        <dd>关注</dd>
                    </dl>
                    <dl>
                        <dt>0</dt>
                        <dd>作品</dd>
                    </dl>
                </div>
                <img src="img/z-2.jpg" alt="">
            </div>
        </div>
        <img src="img/z-3.jpg" alt="">
        <div class="z_nav">
            <dl>
                <dt><img src="img/z-4.jpg" alt=""></dt>
                <dd>订阅</dd>
            </dl>
            <dl>
                <dt><img src="img/z-5.jpg" alt=""></dt>
                <dd>播放历史</dd>
            </dl>
            <dl>
                <dt><img src="img/z-6.jpg" alt=""></dt>
                <dd>下载</dd>
            </dl>
            <dl>
                <dt><img src="img/z-7.jpg" alt=""></dt>
                <dd>已购</dd>
            </dl>
            <dl>
                <dt><img src="img/z-8.jpg" alt=""></dt>
                <dd>听单</dd>
            </dl>
        </div>
        <div class="select_nav">
            <div class="nav_box">
                <dl>
                    <dt><img src="img/z-9.jpg" alt=""></dt>
                    <dd>钱包</dd>
                </dl>
                <dl>
                    <dt><img src="img/z-10.jpg" alt=""></dt>
                    <dd>订单</dd>
                </dl>
                <dl>
                    <dt><img src="img/z-11.jpg" alt=""></dt>
                    <dd>购物车</dd>
                </dl>
                <dl>
                    <dt><img src="img/z-12.jpg" alt=""></dt>
                    <dd>咔嚓笔记</dd>
                </dl>
                <dl>
                    <dt><img src="img/z-13.jpg" alt=""></dt>
                    <dd>联系客服</dd>
                </dl>
                <dl>
                    <dt><img src="img/z-14.jpg" alt=""></dt>
                    <dd>官方商城</dd>
                </dl>
                <dl>
                    <dt><img src="img/z-15.jpg" alt=""></dt>
                    <dd>电子书架</dd>
                </dl>
                <dl>
                    <dt><img src="img/z-16.jpg" alt=""></dt>
                    <dd>朋友圈</dd>
                </dl>
                <dl>
                    <dt><img src="img/z-17.jpg" alt=""></dt>
                    <dd>定时</dd>
                </dl>
                <dl>
                    <dt><img src="img/z-18.jpg" alt=""></dt>
                    <dd>浏览历史</dd>
                </dl>
                <dl>
                    <dt><img src="img/z-19.jpg" alt=""></dt>
                    <dd>智能硬件</dd>
                </dl>
                <dl>
                    <dt><img src="img/z-20.jpg" alt=""></dt>
                    <dd>知识大使</dd>
                </dl>
                <dl>
                    <dt><img src="img/z-21.jpg" alt=""></dt>
                    <dd>无障碍专享</dd>
                </dl>
                <dl>
                    <dt><img src="img/z-22.jpg" alt=""></dt>
                    <dd>我的福利</dd>
                </dl>
                <dl>
                    <dt><img src="img/z-23.jpg" alt=""></dt>
                    <dd>商务合作</dd>
                </dl>
            </div>
            <p><img src="img/shang.png" alt=""></p>
        </div>
        <div class="welfare_wrap">
            <p class="text">成长福利</p>
            <div class="welfare_box">
                <dl>
                    <dt><img src="img/z-24.jpg" alt=""></dt>
                    <dd>
                        <p class="one">我的积分 ></p>
                        <p class="two"><span>0</span>积分</p>
                    </dd>
                </dl>
                <dl>
                    <dt><img src="img/z-25.jpg" alt=""></dt>
                    <dd>
                        <p class="one">累计收听 ></p>
                        <p class="two"><span>3</span>小时</p>
                    </dd>
                </dl>
            </div>
            <div class="task_list_warp">
                <div class="task_list">
                    <dl>
                        <dt><img src="img/z-29.jpg" alt=""></dt>
                        <dd>连续签到七天领VIP</dd>
                    </dl>
                    <p>今日未签到</p>
                </div>
                <p>签到</p>
            </div>
            <div class="task_list_warp">
                <div class="task_list">
                    <dl>
                        <dt><img src="img/z-29.jpg" alt=""></dt>
                        <dd>收听30分钟领30积分</dd>
                    </dl>
                    <p>已听12分钟</p>
                </div>
                <p>去完成</p>
            </div>
            <div class="task_list_warp">
                <div class="task_list">
                    <dl>
                        <dt><img src="img/z-29.jpg" alt=""></dt>
                        <dd>分享节目</dd>
                    </dl>
                    <p>领取30积分</p>
                </div>
                <p>去分享</p>
            </div>
            <p class="select_arrow"><img src="img/xia.png" alt=""></p>
        </div>
        <div class="voucher_box">
            <dl>
                <dt><img src="img/z-27.jpg" alt=""></dt>
                <dd>
                    <p class="one">天猫超市5元现金券</p>
                    <p class="two">全国通用</p>
                    <p class="there"><span>500</span>积分</p>
                </dd>
            </dl>
            <dl>
                <dt><img src="img/z-28.jpg" alt=""></dt>
                <dd>
                    <p class="one">幸运大转盘</p>
                    <p class="two">天天抽豪礼</p>
                    <p class="there"><span>90</span>积分</p>
                </dd>
            </dl>
            <dl>
                <dt><img src="img/z-27.jpg" alt=""></dt>
                <dd>
                    <p class="one">天猫超市5元现金券天猫超市5元现金券天猫超市</p>
                    <p class="two">全国通用</p>
                    <p class="there"><span>500</span>积分</p>
                </dd>
            </dl>
            <dl>
                <dt><img src="img/z-28.jpg" alt=""></dt>
                <dd>
                    <p class="one">幸运大转盘</p>
                    <p class="two">天天抽豪礼</p>
                    <p class="there"><span>90</span>积分</p>
                </dd>
            </dl>
        </div>
    </section>
    <footer>
        <dl>
            <dt class="iconfont icon-shouye"></dt>
            <dd>首页</dd>
        </dl>
        <dl>
            <dt class="iconfont icon-erji"></dt>
            <dd>我听</dd>
        </dl>
        <dl class="cen">
            <dt class="iconfont icon-bofang3"></dt>

        </dl>
        <dl>
            <dt class="iconfont icon-faxiandingdan"></dt>
            <dd>发现</dd>
        </dl>
        <dl>
            <dt class="iconfont icon-xiaoxi"></dt>
            <dd>账号</dd>
        </dl>
    </footer>
    <script src="js/flexble.js"></script>
</body>

</html>